<template>
  <div class="log_details">
    <el-dialog
      title="日志详情"
      width="550px"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="detail_content">
        <div class="content_panel" v-for="item in columns" :key="item.prop">
          <span>{{item.label}}:</span>
          <p :class="{fail_status: item.prop === 'successLabel' && detailData[item.prop] === '失败'}">{{detailData[item.prop] ? detailData[item.prop] : ''}}</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer mes_btn">
        <el-button @click="dialogTableVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import columns from './columns'
export default {
  name: 'LogDetails',
  data() {
    return {
      dialogTableVisible: false,
      columns: columns,
      detailData: {},
    }
  },
  methods: {
    openDialog(row) {
      this.detailData = row
      this.dialogTableVisible = true
    }
  }
}
</script>

<style scoped lang="less">
  .log_details{
    .detail_content{
      max-height: 400px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        /*滚动条*/
        width: 17px;
        height: 17px;
        cursor:pointer;
        margin-left: 4px;
      }
      &::-webkit-scrollbar-thumb {
        /*小方块*/
        border-radius: 16px;
        -webkit-box-shadow: inset 0 0 5px #eee;
        background:#dbe1e8;
        cursor:pointer;
        border:5px solid #fff;
      }
      &::-webkit-scrollbar-thumb:hover {
        cursor:pointer;
      }
      &::-webkit-scrollbar-track {
        /*轨道*/
        width: 17px;
        background: #fff;
      }
      &::-webkit-scrollbar-track:hover{
        cursor:pointer;
      }
      .content_panel{
        display: flex;
        margin-bottom: 10px;
        span{
          width: 60px;
          text-align: right;
          padding-right: 10px;
        }
        p{
          width: calc(100% - 100px);
          word-break: break-all;
        }
        .fail_status{
          color: #f8000f;
        }
      }
    }
  }
</style>
